<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48" >
            <a-col :md="8" :sm="24">
              <a-form-item label="昵称">
                <a-input v-model="queryParam.user_name" placeholder="请输入昵称" allowClear ></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="openid">
                <a-input v-model="queryParam.open_id" placeholder="请输入open_id" allowClear ></a-input>
              </a-form-item>
            </a-col>
            <a-col :md=" 8 || 24" :sm="24">
              <a-form-item>
                <a-button type="primary" @click="queryTable">查询</a-button>
              </a-form-item>
            </a-col>
            <a-col :md=" 8 || 24" :sm="24">
              <a-form-item label="性别">
                <a-select v-model="queryParam.sex" placeholder="请选择性别" allowClear>
                  <a-select-option value="0">男</a-select-option>
                  <a-select-option value="1">女</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <a-table :columns="columns" :dataSource="dataList" :pagination="false" rowKey="id">
        <a slot="name" slot-scope="text" href="javascript:">{{ text }}</a>
        <div slot="sex" slot-scope="text">
          <a v-if="text===0">男</a>
          <a v-if="text===1">女</a>
        </div>
        <img
          style="height:50px"
          slot="pic"
          slot-scope="text, record"
          :src="record.head_portrait_url"
          alt=""/>
      </a-table>
      <my-pagination
        :total="pagination.totalCount"
        :pageSize="pagination.pageSize"
        :current="pagination.pageNo"
        @onChange="onChangePage"
        @onShowSizeChange="onShowSizeChangePage"
      ></my-pagination>
    </a-card>
  </div>
</template>

<script>
import MyPagination from '../../components/Autism/myPagination'
import { queryUser } from '@/api/user'

const columns = [
  {
    title: '用户昵称',
    dataIndex: 'user_name',
    key: 'user_name'
  },
  {
    title: '性别',
    dataIndex: 'sex',
    key: 'sex',
    slots: { title: 'sex' },
    scopedSlots: { customRender: 'sex' }
  }, {
    title: '头像',
    dataIndex: 'head_portrait_url',
    key: 'head_portrait_url',
    scopedSlots: { customRender: 'pic' }
  }, {
    title: 'Openid',
    key: 'open_id',
    dataIndex: 'open_id'
  }, {
    title: '创建时间',
    key: 'create_date_time',
    dataIndex: 'create_date_time'
  }, {
    title: '所在城市',
    key: 'city',
    dataIndex: 'city'
  }]
export default {
  name: 'UserInfoList',
  components: {
    MyPagination
  },
  data: function () {
    return {
      pagination: {
        pageNo: 1,
        pageSize: 10,
        totalCount: 0
      },
      currentTab: 0,
      queryParam: {},
      columns,
      dataList: []
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 分页获取列表
    getList (isSearch) {
      let param = {
        page_index: this.pagination.pageNo,
        page_size: this.pagination.pageSize,
        sex: -1
      }

      if (isSearch) {
        param = Object.assign(this.pagination, this.queryParam)
      }
      queryUser(param)
        .then((res) => {
          console.log(res)
          this.dataList = res.collection
          this.pagination.pageNo = res.page_index
          this.pagination.pageSize = res.page_size
          this.pagination.totalCount = res.total_count
        })
        .catch((err) => {
          console.log(err)
        })
    },
    queryTable () {
      console.log(this.queryParam)
      this.getList(true)
    },
    onChangePage (pageNo, pageSize) {
      this.pagination.pageNo = pageNo
      // 重新请求数据
      this.getList()
    },
    onShowSizeChangePage (pageNo, pageSize) {
      this.pagination.pageSize = pageSize
      // 重新请求数据
      this.getList()
    }
  }
}
</script>

<style lang="less" scoped>
</style>
